<template>
  <div>
    <div
      class="label selection"
      @click="openPop"
    >{{ $t('提币地址') }}</div>
    <div class="input-group">
      <input
        v-model="walletAddr"
        type="text"
        class="input"
        :placeholder="$t('请输入提币地址')"
      />
      <div class="input-right">
        <div
          class="qrcode"
          @click="scanQrcode"
        >
          <i class="icon-scan" />
          <span class="qrcode-text">{{ $t('二维码') }}</span>
        </div>
      </div>
    </div>
    <div
      v-show="list.length>0 && showPop"
      class="pop-addr"
    >
      <div class="caption">{{ $t('选择提币地址') }}</div>
      <div class="addr-picker">
        <label
          v-for="item in list"
          :key="item.id"
          class="item"
        >
          <input
            type="radio"
            name="coin"
            :value="item.coin_symbol"
            :data-addr="item.addr"
            @change="changeCoin"
          >
          <img
            class="icon"
            :src="downPath + item.icon"
            alt=""
          >
          <div class="title">{{ item.title }}</div>
          <div class="symbol">{{ item.coin_symbol }}</div>
        </label>
      </div>
      <button
        class="cancel-btn"
        @click="showPop = false"
      >{{ $t('取消') }}</button>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import { saoYiSaoMessage } from '@/utils/jsbridge'
export default {
  props: {
    name: {
      type: String,
      required: true
    },
    unit: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      showPop: false,
      list: [],
      walletAddr: ''
    }
  },
  computed: {
    ...mapState({
      downPath: ({ imgBaseUrl }) => imgBaseUrl
    })
  },
  watch: {
    walletAddr (val) {
      this.$emit('changeInput', this.name, val)
    }
  },
  created () {
    window.getvalueFromApp = this.getWalletAddr
  },
  methods: {
    ...mapActions({
      getAddrList: 'user/getAddrList'
    }),
    openPop () {
      this.showPop = true
      this.getAddrList()
        .then((data) => {
          this.list = data.data
        })
        .catch(() => {
          this.$router.push({
            path: '/fund/draw_addr'
          })
        })
    },
    changeCoin (e) {
      this.showPop = false
      if (this.unit === e.target.value) {
        this.walletAddr = e.target.dataset.addr
      } else {
        this.$toast.error(this.$t('币种不一致'))
      }
    },
    scanQrcode () {
      saoYiSaoMessage()
    },
    getWalletAddr (value) {
      this.walletAddr = value
    }
  }
}
</script>
<style>
.label {
  font-size: 14px;
  margin-bottom: 8px;
}
.input-group {
  display: flex;
  margin-bottom: 12px;
}
.input {
  flex: 1;
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  padding-left: 4px;
  background-color: #f4f4f4;
  border: 1px solid #f4f4f4;
}
.input:focus {
  border: 1px solid #76bdf3;
}
.input-right {
  margin-left: 10px;
  width: 36px;
}
.qrcode {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.qrcode .icon-scan {
  width: 27px;
  height: 27px;
  background-image: url('~@/assets/images/icons/scan.svg');
}
.qrcode-text {
  font-size: 10px;
}
.pop-addr {
  position: fixed;
  top: 50px;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  z-index: 200;
}
.pop-addr .caption {
  line-height: 40px;
  background-color: #eee;
  padding: 0 15px;
}
.addr-picker {
  position: absolute;
  top: 40px;
  left: 0;
  bottom: 40px;
  width: 100%;
  overflow-y: auto;
}
.addr-picker .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 0 15px;
  border-bottom: 1px solid #eee;
}
.addr-picker .item .icon {
  position: static;
  flex-shrink: 0;
  margin: 0 10px;
  width: 24px;
  height: 24px;
}
.addr-picker .symbol {
  flex-grow: 1;
  text-align: right;
}
.cancel-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  line-height: 40px;
  background-color: #1a85d7;
  z-index: 10;
  color: #ffffff;
}
.selection::after {
  display: inline-block;
  width: 0;
  height: 0;
  border: solid transparent;
  border-width: 6px;
  border-top-color: #666;
  content: '';
  margin-bottom: -5px;
  margin-left: 4px;
}
</style>
